<template>
	<view class="reservation">
		<u-navbar :is-back="false" :border-bottom="false" title="付款">
			<view class="page_navbar_warp">
				<image src="https://ryk.runyukang.cn/static/static/icon/0.png" mode="" class="page_navbar_commonImg" @click="$go(1,1)"></image>
			</view>
		</u-navbar>
		<view class="header df-aic">
			<image :src="info.head_img" mode="" class="img"></image>
			<view class="fsz-28 fw-b u-line-1 name">{{info.name}}</view>
		</view>
		<view class="content">
			<view class="fsz-24 mb-40">支付金额</view>
			<view class="df-aic">
				<text class="fsz-48 fw-b">￥</text>
				<input type="text" placeholder="请输入付款金额" v-model="num">
			</view>
		</view>
		<view class="content content2">
			<view class="fsz-24 mb-40">备注</view>
			<view class="df-aic">
				<input type="text" placeholder="备注信息（选填）" v-model="note">
			</view>
		</view>
		
		<u-button hover-class="none" :ripple="true" class="btn fsz-28 fw-b color-0 df-aic-jucen" :loading="loading" @click="submit">支付</u-button>
		<view hover-class="none" class="btn btn2 df-aic-jucen" @click="$go(3,'/pages/tabbar/index')">返回商城</view>
		
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="40">
			<view class="payment">
				<view class="u-font-32 u-text-center">支付方式</view>
				<!-- #ifndef H5 -->
				<view class="item df-aic-jusb u-m-t-40" @click="payment('wechat','')">
					<view class="df-aic">
						<image src="https://cos.runyukang.cn/static/icon/wx.png" mode="" class="icon"></image>
						<text class="fsz-28 ml-20">微信</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
				<!-- #endif -->
				
				
				<!-- #ifndef MP-WEIXIN -->
				<view class="item df-aic-jusb  u-m-t-12" @click="payment('alipay','')">
					<view class="df-aic">
						<image src="https://cos.runyukang.cn/static/icon/zfb.png" mode="" class="icon"></image>
						<text class="fsz-28 ml-20">支付宝</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
				<!-- #endif -->
				
				<!-- #ifndef H5 -->
				<!-- <view class="item df-aic-jusb u-m-t-40" @click="payment('wechat','integral')" v-if="type == 2">
					<view class="df-aic">
						<image src="https://cos.runyukang.cn/static/icon/wx.png" mode="" class="icon"></image>
						<text class="fsz-28 ml-20">微信+积分</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view> -->
				<!-- #endif -->
				
				<!-- #ifndef MP-WEIXIN -->
				<!-- <view class="item df-aic-jusb u-m-t-40" @click="payment('wechat','integral')" v-if="type == 2">
					<view class="df-aic">
						<image src="https://cos.runyukang.cn/static/icon/zfb.png" mode="" class="icon"></image>
						<text class="fsz-28 ml-20">支付宝+积分</text>
					</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view> -->
				<!-- #endif -->
				
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				num:'',
				note:'',
				id:'',
				type:'',
				info:{},
				show:false,
				payment_type:'',
				token:'',
				integral_pay_method:''
			}
		},
		onLoad(option) {
			console.log('支付',option)
			this.token = uni.getStorageSync('token');
			if(option.id){
				this.id = option.id
				this.type = option.type
				this.num = option.money
				if(this.type == 1){
					this.$http.get('/api/stores/info',{
						id:this.id,
					}).then(res=>{
						if(res.code == 200){
							this.info = res.data.info
						}
					})
				}else{
					this.$http.get('/api/unstore/info',{
						id:this.id,
					}).then(res=>{
						if(res.code == 200){
							this.info = res.data.info
						}
					})
				}
			}
		},
		methods:{
			submit(){
				if(this.num == '') return this.$toast('请输入支付金额')
				this.show = true;
			},
			payment(type,integral_pay_method){
				this.show = false
				this.payment_type = type
				this.integral_pay_method = integral_pay_method
				if(this.payment_type == 'wechat'){
					// #ifdef APP
					this.$app_to_wx(`/pages/tabbar/login?pay_info=StorePay&storeId=${this.id}&storeType=${this.type}&token=${this.token}&money=${this.num}`)
					setTimeout(()=>{
						this.show = false;
					},1500)
					// #endif
					
					// #ifdef MP-WEIXIN
					this.wx_getcode()
					// #endif
					
				}else if(this.payment_type == 'alipay'){
					this.pay()
				}
				
			},
			wx_getcode(){
				uni.login({
					provider: 'weixin',
					scopes:'auth_base',
					success: (loginRes)=> {
						console.log(loginRes.code);
						this.pay(loginRes.code);
					},
					fail:(err)=> {
						console.log(err);
					}
				});
			},
			// 调用接口支付
			pay(code){
				let req = {
					type:this.type,
					balance_pay_method:this.payment_type,
					money:this.num,
					store_id:this.id,
					integral_pay_method:this.integral_pay_method,
				}
				if(code) req.wx_code = code
				this.$http.post('/api/storePay',req).then(res=>{
					if(res.code == 200){
						var data = res.data;
						var pay_info = data.pay_info
						if(this.payment_type == 'wechat'){
							// #ifdef MP-WEIXIN
							this.$wxpay(pay_info).then(res=>{
								if(res.errMsg == 'requestPayment:fail cancel'){
									this.$toast('支付取消',true)
								}else{
									console.log('支付成功', res);
									uni.showToast({
										title: '开通成功',
										icon: 'success'
									});
									this.show = false;
									// 刷新会员列表
									this.loadVipList();
								}
							})
							// #endif
							
						}else if(this.payment_type == 'alipay'){
							// #ifdef APP
							const deeplink = `alipays://platformapi/startapp?saId=10000007&qrcode=${encodeURIComponent(data.qr_code)}`;
							plus.runtime.openURL(deeplink);
							// #endif
							
							// #ifdef H5
							console.log(data.qr_code)
							location.href = data.qr_code;
							// #endif
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.reservation{
		.header{
			width: 690rpx;
			height: 140rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 40rpx auto;
			padding: 0 30rpx;
			.img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
			}
			.name{
				padding-left: 20rpx;
				width: 500rpx;
			}
		}
		::v-deep.content{
			width: 690rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 30rpx auto;
			padding: 30rpx;
			.uni-input-input,input{
				font-size: 48rpx;
				margin-left: 10rpx;
			}
		}
		::v-deep.content2{
			margin-bottom: 120rpx;
			.uni-input-input,input{
				font-size: 24rpx;
				margin-left: 0rpx;
			}
		}
		
		::v-deep.btn {
			width: 690rpx;
			height: 88rpx;
			background: #E93323;
			border-radius: 88rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			margin: 32rpx auto 0;
		
			button {
				width: 100%;
				color: #fff;
				background: transparent;
			}
		}
		.btn2{
			background: transparent;
			border: 1px solid #E93323;
			color: #E93323;
		}
		.payment{
			padding: 30rpx;
			padding-bottom: 90rpx;
			.item{
				height: 92rpx;
				background-color: #F6F6F6;
				border-radius: 20rpx;
				padding: 0 30rpx;
				.icon{
					width: 48rpx;
					height: 48rpx;
				}
				.arr{
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
	}
</style>